<template>
	<view class="uploadList">
		<block>
			<view class="box" v-for="(item, index) in imageList" :key="index">
				<image :src="item" mode="aspectFill" @click="viewImg(index)"></image>
				<view class="del" @click="delImg(index)">
					<uni-icons type="clear" size="26" color="#000"></uni-icons>
				</view>
			</view>
		</block>
		<view class="upload" v-if="imageList.length < limit" @click="choseImage">
			<uni-icons type="plusempty" size="50" color="#c7c7c7"></uni-icons>
		</view>
	</view>
</template>

<script>
import baseUrl from '@/utils/config';
import { isBlank } from '@/utils/validate';
import api from '@/api/api';
export default {
	name: 'imageUpload',
	props: {
		image: {
			type: String,
			default: ''
		},
		max: {
			type: Number,
			default: 20
		},
		limit: {
			type: Number,
			default: 3
		}
	},
	data() {
		return {
			imageList: []
		};
	},
	mounted() {
		this.imageList = isBlank(this.image) ? [] : this.image.split(',');
	},
	methods: {
		// 上传图片
		choseImage() {
			const _this = this;
			uni.chooseMedia({
				count: _this.limit - _this.imageList.length,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				success(res) {
					_this.uploadList(res.tempFiles);
				}
			});
		},
		async uploadList(urls) {
			uni.showLoading({
				title: '上传中...'
			});
			this.imageSuccess = [];
			for (let i = 0; i < urls.length; i++) {
				if (urls[i].size < this.max * 1024 * 1024) {
					this.imageSuccess.push(false);
					await this.uploadImg(urls[i].tempFilePath, i);
				} else {
					uni.showToast({
						title: '所选图片超过大小限制，已取消上传超限的图片',
						icon: 'none'
					});
				}
			}
		},
		uploadImg(url, i) {
			const _this = this;
			uni.uploadFile({
				url: baseUrl + '/?s=App.Common_File.Upload',
				filePath: url,
				name: 'file',
				formData: {
					access_token: uni.getStorageSync('access_token')
				},
				success: (uploadFileRes) => {
					let data = JSON.parse(uploadFileRes.data);
					if (data.ret == 200) {
						_this.imageList.push(data.data.url);
						_this.imageSuccess[i] = true;
						_this.listChange();
						if (!_this.imageSuccess.includes(false)) {
							uni.hideLoading();
							_this.imageSuccess = [];
						}
					} else {
						uni.hideLoading();
						uni.showToast({
							title: data.msg.split('：').slice(-1)[0],
							icon: 'none'
						});
					}
				},
				fail: (res) => {
					uni.hideLoading();
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
				}
			});
		},
		viewImg(index) {
			const _this = this;
			uni.previewImage({
				current: index,
				urls: _this.imageList
			});
		},
		delImg(index) {
			this.imageList.splice(index, 1);
			this.listChange();
		},
		listChange() {
			this.$emit('onChange', this.imageList);
		}
	}
};
</script>

<style lang="scss">
.uploadList {
	display: flex;
	flex-wrap: wrap;
	.box {
		box-sizing: border-box;
		width: 210rpx;
		height: 210rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 6rpx;
		position: relative;
		background: #fff;
		box-shadow: $uni-shadow-base;
		image {
			width: 210rpx;
			height: 210rpx;
		}
		.del {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 10;
		}
		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}
	.upload {
		box-sizing: border-box;
		width: 210rpx;
		height: 210rpx;
		border: 1rpx solid #eee;
		border-radius: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		box-shadow: $uni-shadow-base;
	}
}
</style>
